<template>
    <div class="coupons">
        <div class="operate">
            <el-button type="primary" @click="addCoupons">发放优惠券</el-button>
            <div class="search">
                <el-input input-style="width: 70%;margin-right: 10px;" v-model="searchName" placeholder="请输入优惠券名称查询" />
                <el-button type="primary" @click="search">查询</el-button> 
            </div>   
        </div>
        <div class="couponsTable">
            <el-table border :data="tableData" style="width: 100%">
                <el-table-column prop="name" label="名称" width="180" />
                <el-table-column prop="count" label="发行数量" width="120" />
                <el-table-column prop="amount" label="价格" width="120" />
                <el-table-column label="优惠券类型" width="130">
                    <template #default="scope">
                        <span v-if="scope.row.type==0">全场赠券</span>
                        <span v-else-if="scope.row.type==1">会员赠券</span>
                    </template>
                </el-table-column>
                <el-table-column label="使用类型" width="130">
                    <template #default="scope">
                        <span v-if="scope.row.useType==0">全场通用</span>
                        <span v-else-if="scope.row.useType==1">指定商品</span>
                    </template>
                </el-table-column>
                <el-table-column prop="startTime" label="开始时间" width="200" />
                <el-table-column prop="endTime" label="结束时间" width="200" />
                <el-table-column prop="note" label="备注" width="200" />
                <el-table-column fixed="right" label="操作" width="100">
                <template #default="scope">
                    <el-button type="danger" size="small" @click="deleteClick(scope)">删除</el-button>
                </template>
                </el-table-column>
            </el-table>
            <el-pagination @current-change="clickChange" background layout="pager" :page-size="pagination.end" :total="pagination.total" />
        </div>
        <el-drawer
            v-model="drawer"
            title="添加"
            direction="rtl"
        >
            <div class="fromOperate" style="margin-top: 10px;">
                <el-form :model="fromData" label-width="90px">
                    <el-form-item label="名称">
                        <el-input v-model="fromData.name" />
                    </el-form-item>
                    <el-form-item label="数量">
                        <el-input v-model="fromData.count" />
                    </el-form-item>
                    <el-form-item label="金额">
                        <el-input v-model="fromData.amount" />
                    </el-form-item>
                    <el-form-item label="结束时间">
                        <el-date-picker 
                            v-model="fromData.endTime"
                            type="datetime"
                            placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="优惠券类型">
                        <el-select v-model="fromData.type" placeholder="请选择">
                            <el-option label="全场赠券" value=0 />
                            <el-option label="会员赠劵" value=1 />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="使用类型">
                        <el-select v-model="fromData.useType" placeholder="请选择">
                            <el-option label="全场通用" value=0 />
                            <el-option label="指定商品" value=1 />
                        </el-select>
                    </el-form-item>
                    <el-form-item v-if="fromData.useType==1" label="商品">
                        <el-input v-model="fromData.goodId" />
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input v-model="fromData.note" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">添加</el-button>
                        <el-button @click="drawer=false">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-drawer>
    </div>
</template>
<script>
import { defineComponent } from '@vue/composition-api'
import { getCurrentInstance} from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { ElMessageBox,ElMessage  } from 'element-plus'
export default defineComponent({
    data(){
        return {
            searchName:'',
            tableData:[],
            drawer:false,
            floodDischargeBegintime:'',
            fromData:{
                "name":'',
                "type":0,
                "count":0,
                "amount":0,
                "endTime":'',
                "useType":0,
                "goodId":'',
                "note":''
            },
            pagination:{
                start:0,
                end:10,
                current:1,
                total:100
            }
        }
    },
    setup() {
        // 路由
        const route = useRouter();
        // vuex的数据对象
        const store = useStore();
        const { proxy } = getCurrentInstance();
        return{
            proxy,
            route,
            store
        } 
    },
    created () {
        this.user = this.store.state.UserMessage;
        if(this.user==null) return;
        this.LoadData()
    },
    methods:{
        LoadData(){
            let self = this;
            let row = self.pageData();
            row.name = null;
            self.$http.post(`${self.baseUrl}/coupons/selectName`,row).then(res=>{
                let {document,total} = res.data;
                console.log(res.data)
                self.tableData = document;
                self.pagination.total = total;
            })
        },
        search(){
            let self = this;
            let row = self.pageData();
            row.name = self.searchName;
            row.current = 1;
            self.$http.post(`${self.baseUrl}/coupons/selectName`,row).then(res=>{
                let {document,end,start,total} = res.data;
                self.tableData = document;
                self.pagination.start = start;
                self.pagination.end = end;
                self.pagination.total = total;
            })
        },
        addCoupons(){
            this.fromData = this.initial();
            this.drawer = true;
        },
        onSubmit(){
            let self = this;
            self.fromData.endTime = self.formatDateTime(this.fromData.endTime,"yyyy-MM-dd HH:mm:ss");
            self.$http.post(`${self.baseUrl}/coupons/addCoupons`,this.fromData).then(res=>{
                if(res.data>0){
                    ElMessage({
                        message:"发放成功",
                        type:'success'
                    })
                    self.LoadData();
                    this.drawer = false;
                }else{
                    ElMessage({
                        message:"发放失败",
                        type:'error'
                    })
                }
            })
        },
        deleteClick(msg){
            let self = this;
            ElMessageBox.confirm(`确定要删除此${msg.row.name}吗？`,'删除',{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
            }).then(() => {
                self.$http.get(`${self.baseUrl}/coupons/deleteCoupons?id=${msg.row.id}`).then(res=>{
                    if(res.data!=0){
                        ElMessage({
                            message:"删除成功",
                            type:'success'
                        })
                        self.LoadData()
                    }else{
                        ElMessage({
                            message:"删除失败",
                            type:'error'
                        })
                    }
                })
            }).catch(() => {})
        },
        clickChange(msg){
            this.pagination.current = msg;
            this.LoadData();
        },
        // 转换时间戳
        formatDateTime(date, format){
            const o = {
                'M+': date.getMonth() + 1, // 月份
                'd+': date.getDate(), // 日
                'h+': date.getHours() % 12 === 0 ? 12 : date.getHours() % 12, // 小时
                'H+': date.getHours(), // 小时
                'm+': date.getMinutes(), // 分
                's+': date.getSeconds(), // 秒
                'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
                S: date.getMilliseconds(), // 毫秒
                a: date.getHours() < 12 ? '上午' : '下午', // 上午/下午
                A: date.getHours() < 12 ? 'AM' : 'PM', // AM/PM
            };
            if (/(y+)/.test(format)) {
                format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
            }
            for (let k in o) {
                if (new RegExp('(' + k + ')').test(format)) {
                format = format.replace(
                    RegExp.$1,
                    RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
                );
                }
            }
            return format;
        },
        pageData(){
            let row = {};
            row.end = this.pagination.end;
            row.current = this.pagination.current;
            return row;
        },
        initial(){
            return {
                "name":'',
                "type":'0',
                "count":0,
                "amount":0,
                "endTime":'',
                "useType":'0',
                "goodId":'',
                "note":''
            }
        }
    }
})
</script>
<style scoped>
    .search{
        float: right;
    }
    .couponsTable{
        margin-top: 16px;
    }
    .el-table{
        width: 100%;
        height: calc(576px - 15px);
    }
</style>
